﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS属性border-style的应用</title>
        <style>
            p {
                width: 200px;
                height: 30px;
                border-width: 5px;
            }
            #p01 {
                border-style: none
            }
            #p02 {
                border-style: dotted
            }
            #p03 {
                border-style: dashed
            }
            #p04 {
                border-style: solid
            }
            #p05 {
                border-style: double
            }
            #p06 {
                border-style: groove
            }
            #p07 {
                border-style: ridge
            }
            #p08 {
                border-style: inset
            }
            #p09 {
                border-style: outset
            }
        </style>
    </head>
    <body>
        <h3>CSS属性border-style的应用</h3>
        <hr />
        <p id="p01">无边框效果</p>
        <p id="p02">点状边框效果</p>
        <p id="p03">虚线边框效果</p>
        <p id="p04">实线边框效果</p>
        <p id="p05">双线边框效果</p>
        <p id="p06">3D凹槽边框效果</p>
        <p id="p07">3D脊状边框效果</p>
        <p id="p08">3D内嵌边框效果</p>
        <p id="p09">3D外凸边框效果</p>
    </body>
</html>